<template>
  <div class="page">
    <r-header />
    <main class="main">
      <div class="mycard">
        <img class="myimg" src="/assets/千寻.png">
        <div class="mail">{{ $store.state.user.profile.phone_number.substring(0, 3) }}****{{ $store.state.user.profile.phone_number.substring(7) }}</div>
        <div>剩余次数:0</div>
      </div>
      <div class="cards">
        <div class="card">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
               class="cardimg">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
          </svg>
          <div class="txt">引荐返利</div>
          <p class="">邀请朋友，轻松获得额外的现金返利！</p>
        </div>
        <div class="card">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
               class="cardimg">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
          </svg>
          <div class="txt">购买记录</div>
          <p class="">查询所有套餐购买记录</p>
        </div>
        <div class="card">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
               class="cardimg">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
          </svg>
          <div class="txt">资料编辑</div>
          <p class="">在这里可以修改登录密码</p>
        </div>
        <div class="card">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
               class="cardimg">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
          </svg>
          <div class="txt">套餐购买</div>
          <p class="">无限制的对话</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script type="text/javascript">
import { useStore } from 'vuex';
export default {
  name: "my",
  data() {
    return {

    }
  },

  props: {
  },
  computed: {
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #0f172a;
  max-width: 1280px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.mycard {
  display: flex;
  flex-direction: column;
  margin: 0rem 0 2rem;
  align-items: center;
  justify-content: center;
  color: #6986a0;
  cursor: pointer;

  .mail {
    font-size: large;
    font-size: 18px;
    margin: 5px 0;
    color: #ffffff;
  }
}

.myimg {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.card {
  display: flex;
  flex-direction: column;
  // flex-wrap: wrap-reverse;
  padding: 1.5rem;
  border-radius: 10px;
  background: radial-gradient(164.75% 100% at 50% 0%, #334155 0%, #0F172A 48.73%);
  color: #b3c6d9d6;
  font-size: 13px;
  margin: 1rem 3rem;

  svg {

    color: #cbc9c9;
    width: 10%;
    height: 10%;
  }

  .txt {
    color: #cbc8c8;
    margin: 1rem 0 0.5rem 0;
    font-size: 18px;
  }
}

.card:hover {
  box-shadow: 0 0 5px #03e9f4, 0 0 10px #03e9f4, 0 0 15px #03e9f4,
}
</style>